<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
    <h1>axios请求拦截器</h1>
    <button id="btnGet">发送请求</button>
    <script>
        //创建axios实例
        const myAxios = axios.create({
            baseURL: '/',
            Timeout: 10000,//请求时间
            Headers: {}//配置请求头
        })
        //---------------------设置请求拦截器------------------------------
        myAxios.interceptors.request.use((config) => {
            // 打印配置对象的信息
            // console.log(config, '请求发送中');
            // 假定一个token令牌
            const token = 'dsdjhnasjdajksdajksdajksbasjkdjaskj'
            //设置进度条
            NProgress.start()
            config.headers.token = token
            // 设置拦截事件
            alert('发送成功')
            // 放行
            return config
        }, (err) => {
            // 拦截器是用then做的，所以return的对象不是一个失败的promise实例的话，就无法判断失败信息
            return Promise.reject(err)
        })


        // --------------------设置响应拦截，可以在此对响应的数据进行操作--------------------
        myAxios.interceptors.response.use((response) => {
            // 打印一下配置对象信息看看
            // console.log(config, '请求响应中');
            NProgress.done()
            if (response.data.code !== '100') {
                return Promise.reject(response.data.msg)
            }
            console.log(response.data.msg);
            // 设置一个拦截事件
            alert('响应成功')
            // 将需要的数据return出去
            return response.data.data
        }, (err) => {
            return Promise.reject(err)
        })

        // --------------------获取dom元素----------------------------------
        const btnGet = document.getElementById('btnGet')
        const oCancel = document.getElementById('Cancel')
        // 获取axios里取消发送的构造函数，cancel取消的意思
        const CancelToken = axios.CancelToken;
        //初始化一个取消报文的变量
        let cancel = null
        // 添加get请求点击事件，用async创建异步函数
        btnGet.onclick = async function () {
            // 通过配置try catch捕获失败信息，不知为何捕获不了语法错误
            try {
                // await会等待后面的promise实例的结果
                //user立即请求的接口，userlazy延时请求的接口
                const re = await myAxios.get('http://127.0.0.1:9000/user', {
                    // 这是axios的配置对象，设置请求的规定，params是url参数
                    params: {
                        //userID的值为输入框输入的value
                        userID: '001'
                    },
                })
                //await返回的是一个成功的promise实例便会在此打印结果
                console.log(re);
            } catch (err) {
                //如果是失败实例将在此打印失败信息
                console.log(err.message);
            }
        }
    </script>
</body>

</html>